<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>

      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="油站名称" v-model="filters.like$name"></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-document" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="80" fixed="left">
      </el-table-column>

      <el-table-column prop="name" align="center" label="油站名称" width="120" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="addr" align="center" label="油站街道地址" width="120" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.addr}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="phone" align="center" label="电话号码" width="120" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="province" align="center" label="油站所在省份" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.province}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="city" align="center" label="油站所在市" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.city}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="area" align="center" label="油站所在区" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.area}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="image" align="center" label="油站图片" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.image" v-if="scope.row.image" alt="" style="max-width:100px;" />
        </template>
      </el-table-column>


      <el-table-column prop="longitude" align="center" label="经度" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.longitude}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="latitude" align="center" label="纬度" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.latitude}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="state" align="center" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state|oilStatusTypeFilter">{{scope.row.state|oilStatusFilter}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="isVip" align="center" label="支持vip会员卡" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.isVip|supportFilter}}</span>
        </template>
      </el-table-column>



      <el-table-column prop="mapAdr" align="center" label="地图地址" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.mapAdr}}</span>
        </template>
      </el-table-column>




      <el-table-column prop="code" align="center" label="油站编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>



      <el-table-column prop="region" align="center" label="油站所在大区" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.region|regionFilter}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="isSelfPay" align="center" label="自助支付" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isSelfPay|oilStatusTypeFilter">
            {{scope.row.isSelfPay|supportFilter}}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="aheadPay" align="center" label="前庭支付" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.aheadPay|oilStatusTypeFilter">
            {{scope.row.aheadPay|supportFilter}}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="isEInvoice" align="center" label="电子发票" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isEInvoice|oilStatusTypeFilter">
            {{scope.row.isEInvoice|supportFilter}}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="isSelfPayDidi" align="center" label="滴滴自支付" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isSelfPayDidi|oilStatusTypeFilter">
            <span>{{scope.row.isSelfPayDidi|supportFilter}}</span>
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="isCarNumPay" align="center" label="车牌付" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isCarNumPay|oilStatusTypeFilter">

            <span>{{scope.row.isCarNumPay|supportFilter}}</span>
          </el-tag>
        </template>

      </el-table-column>


      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">

        <el-form-item label="油站名称" prop="name">


          <el-input v-model="temp.name" placeholder="油站名称"></el-input>


        </el-form-item>

        <el-form-item label="油站街道地址" prop="addr">


          <el-input v-model="temp.addr" placeholder="油站街道地址"></el-input>


        </el-form-item>
        <el-form-item label="地图地址" prop="mapAdr">


          <el-input v-model="temp.mapAdr" placeholder="地图地址"></el-input>


        </el-form-item>



        <el-form-item label="油站编码" prop="code">


          <el-input v-model="temp.code" placeholder="油站编码"></el-input>


        </el-form-item>
        <el-form-item label="油站图片" prop="image">


          <el-upload class="avatar-uploader" :action="UPLOAD_URL" :show-file-list="false" :on-success="handleAvatarSuccess('image')"
            :before-upload="beforeAvatarUpload">
            <img v-if="temp.image" :src="temp.image|absUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>


        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话号码" prop="phone">


              <el-input v-model="temp.phone" placeholder="电话号码"></el-input>


            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油站所在省份" prop="province">


              <el-input v-model="temp.province" placeholder="油站所在省份"></el-input>


            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">


            <el-form-item label="油站所在市" prop="city">


              <el-input v-model="temp.city" placeholder="油站所在市"></el-input>


            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油站所在区" prop="area">


              <el-input v-model="temp.area" placeholder="油站所在区"></el-input>


            </el-form-item>
          </el-col>
        </el-row>




        <el-row>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">


              <el-input v-model="temp.longitude" placeholder="经度"></el-input>


            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">


              <el-input v-model="temp.latitude" placeholder="纬度"></el-input>


            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="是否可用" prop="state">


              <el-select v-model="temp.state" placeholder="请选择">
                <el-option v-for="(label,value) in isok" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="vip会员卡" prop="isVip">


              <el-select v-model="temp.isVip" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">


            <el-form-item label="油站所在大区" prop="region">


              <el-select v-model="temp.region" placeholder="请选择">
                <el-option v-for="(label,value) in regionData" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="自支付" prop="isSelfPay">

              <el-select v-model="temp.isSelfPay" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>


            </el-form-item>

          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="前庭支付" prop="aheadPay">

              <el-select v-model="temp.aheadPay" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="电子发票" prop="isEInvoice">


              <el-select v-model="temp.isEInvoice" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>


            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="滴滴支付" prop="isSelfPayDidi">


              <el-select v-model="temp.isSelfPayDidi" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter2" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>



            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌付" prop="isCarNumPay">


              <el-select v-model="temp.isCarNumPay" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>



            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let regionData = ["广州", "粤东", "粤西"];
  let supportFilter = ["不支持", "支持"];
  let supportFilter2 = {false:"不支持", true:"支持"};
  let isok = ['不可用', '可用'];
  export default {
    data() {
      return {
        supportFilter,
        supportFilter2,
        total: 0,
        regionData,
        isok,
        temp: {
          id: "",

          name: "",

          addr: "",

          phone: "",

          province: "",

          city: "",

          area: "",

          image: "",

          longitude: "",

          latitude: "",

          state: "",

          isVip: "",

          mapLl: "",

          mapAdr: "",

          mapAddr: "",

          code: "",

          bankCardPrivilege: "",

          region: "",

          isSelfPay: "",

          aheadPay: "",

          isEInvoice: "",

          isSelfPayDidi: "",

          isCarNumPay: ""
        },

        rules: {
          name: [{
            required: true,
            message: "油站名称不能为空"
          }],

          addr: [{
            required: true,
            message: "油站街道地址不能为空"
          }],

          phone: [{
            required: true,
            message: "电话号码不能为空"
          }],

          province: [{
            required: true,
            message: "油站所在省份不能为空"
          }],

          city: [{
            required: true,
            message: "油站所在市不能为空"
          }],

          area: [{
            required: true,
            message: "油站所在区不能为空"
          }],

          image: [{
            required: true,
            message: "油站图片不能为空"
          }],

          longitude: [{
            required: true,
            message: "经度不能为空"
          }],

          latitude: [{
            required: true,
            message: "纬度不能为空"
          }],

          state: [{
            required: true,
            message: "请指定可用状态"
          }],

          isVip: [{
            required: true,
            message: "请选择VIP支付状态"
          }],


          code: [{
            required: true,
            message: "油站编码不能为空"
          }],


          region: [{
            required: true,
            message: "请选择所在大区"
          }],

          isSelfPay: [{
            required: true,
            message: "不能为空",
            trigger: "change"
          }],

          aheadPay: [{
            required: true,
            message: "前庭支付",
            trigger: "change"
          }],

          isEInvoice: [{
            required: true,
            message: "请选择是否支持电子发票",
            trigger: "change"
          }],

          isSelfPayDidi: [{
            required: true,
            message: "请选择是否支持滴滴支付",
            trigger: "change"
          }],

          isCarNumPay: [{
            required: true,
            message: "请选择是否支持车牌付",
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.init("gas_station", 1).loadData();
    },
    filters: {
      supportFilter(v) {
        if (v === true) {
          v = 1;
        } else if (v === false) {
          v = 0;
        }
        return supportFilter[parseInt(v)];
      },
      regionFilter(v) {
        return regionData[parseInt(v)];
      },
      oilStatusTypeFilter(v) {
        if (v === true) {
          v = 1;
        } else if (v === false) {
          v = 0;
        }
        return ["danger", "success"][parseInt(v)];
      },
      oilStatusFilter(v) {
        return isok[parseInt(v)];
      }
    },
    methods: {
      exportExcelFile() {
        this.exportExcel({
          title: "",
          fields: [{
              field: "name",
              title: "油站名称"
            },

            {
              field: "addr",
              title: "油站街道地址"
            },

            {
              field: "phone",
              title: "电话号码"
            },

            {
              field: "province",
              title: "油站所在省份"
            },

            {
              field: "city",
              title: "油站所在市"
            },

            {
              field: "area",
              title: "油站所在区"
            },

            {
              field: "image",
              title: "油站图片地址"
            },

            {
              field: "longitude",
              title: "经度"
            },

            {
              field: "latitude",
              title: "纬度"
            },

            {
              field: "state",
              title: "状态"
            },

            {
              field: "isVip",
              title: "是否支持vip会员卡   1支持  0不支持"
            },

            {
              field: "mapLl",
              title: ""
            },

            {
              field: "mapAdr",
              title: ""
            },

            {
              field: "mapAddr",
              title: ""
            },

            {
              field: "code",
              title: "油站编码"
            },

            {
              field: "bankCardPrivilege",
              title: "支持的银行卡优惠，以分号隔开"
            },

            {
              field: "region",
              title: "油站所在大区 0"
            },

            {
              field: "isSelfPay",
              title: ""
            },

            {
              field: "aheadPay",
              title: "是否支持前庭支付 0：不支持   1：支持"
            },

            {
              field: "isEInvoice",
              title: ""
            },

            {
              field: "isSelfPayDidi",
              title: ""
            },

            {
              field: "isCarNumPay",
              title: "是否支持车牌付 1支持 0不支持"
            }
          ]
        }).then(info => {
          this.openWin(info);
        });
      }
    }
  };

</script>
